<template>
  <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">

    <el-form-item label="一级分类">
      <el-select v-model="category1Id" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
        <el-form-item label="二级分类">
      <el-select v-model="formInline.region" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
        <el-form-item label="三级分类">
      <el-select v-model="formInline.region" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
   
  </el-form>
  </el-card>
</template>

<script  lang="ts">    
    export default {
        name:'CategorySelector'
    }
</script>
<script lang="ts" setup>
import { reactive ,computed} from 'vue'
import {useCategoryData} from '@/stores/category'
// 获取一个store仓库对象
const store = useCategoryData()
const category1Id = computed({
        get(){
            return store.category1Id
        },
        set(id){
            store.Setcategory1Id(id)
        }
})

const formInline = reactive({
  user: '',
  region: '',
})


</script>
<style scoped>

</style>